<div class="content">
    <h2 class="api-name">引入文件</h2>
    <textarea name="code" class="js"> 
    <script type="text/javascript" src="simpleSlider.js"></script>
    </textarea>
    <h2 class="api-name">使用SimpleSlider</h2>
    <div class="part">
        <h3 class="api-guide"><a href="../doc/demo/slider.html" class="demo-btn ml10" target="_blank">仿拍拍/淘宝</a> <a href="../doc/demo/slider_yinyuetai.html" class="demo-btn ml10" target="_blank">仿音悦台</a> <a href="../doc/demo/tab.html" class="demo-btn" target="_blank">选项卡</a>Simple.Slider(opts)</h3>
        <p class="desc"><strong>概述：</strong>SimpleSlider 可提供幻灯片及选项卡功能</p>
        <h3 class="api-guide">SimpleSlider API</h3>
        <table class="configList">
            <tr>
                <th width="100">配置选项</th><th width="200">数据类型</th><th>说明</th>
            </tr>
            <tr>
                <td>trigger</td><td>string/bool {default:true}</td><td>指定trigger对象,传入选择器则自动查找对象, 传入bool值则自动生成trigger对象</td>
            </tr>
            <tr>
                <td>[triggerClass]</td><td>string</td><td>trigger的class, 自动构建的trigger可能需要添加。可选参数</td>
            </tr>
            <tr>
                <td>triggerCurrentClass</td><td>string</td><td>trigger 选中项样式</td>
            </tr>
            <tr>
                <td>content</td><td>string/object</td><td>显示的内容项</td>
            </tr>
            <tr>
                <td>[isAuto]</td><td>bool{default: true}</td><td>是否自动执行</td>
            </tr>
            <tr>
                <td>[delay]</td><td>int{default: 0}</td><td>操作延时</td>
            </tr>
            <tr>
                <td>[speed]</td><td>int{default: 300}</td><td>执行动画的时间(毫秒)</td>
            </tr>
            <tr>
                <td>[timeout]</td><td>int{default: 3000}</td><td>间歇时间(毫秒)</td>
            </tr>
            <tr>
                <td>[prev]</td><td>string</td><td>上一张按钮</td>
            </tr>
            <tr>
                <td>[next]</td><td>string</td><td>下一张按钮</td>
            </tr>
            <tr>
                <td>[defaultShow]</td><td>int{default: 1}</td><td>默认显示第几项</td>
            </tr>
            <tr>
                <td>[direction]</td><td>string{default: "left"}</td><td>移动方向  仅支持["left", "top", "none"]</td>
            </tr>
            <tr>
                <td>[template]</td><td>string</td><td>自动生成的trigger模版(模版使用说明见本页下方)</td>
            </tr>
            <tr>
                <td>[bindEvent]</td><td>string{default: "mouseover"}</td><td>对trigger绑定哪些事件 多个时间用空格隔开</td>
            </tr>
            <tr>
                <td>[ontrigger]</td><td>function</td><td>切换前回调</td>
            </tr>
            <tr>
                <td>ontriggered</td><td>function</td><td>切换后回调</td>
            </tr>
        </table>
        
        <h3 class="api-guide">SimpleSlider template 使用方法</h3>
        <p>SimpleSlider 默认trigger 模版及语法为: </p>
        <textarea name="code" class="html">
        <ol simpleEvent="trigger">
            <s:each>
                <li>{0}</li>
            </s:each>
        </ol>
        </textarea>
        <p>根据模板生成HTML后，SimpleSlider 通过 simpleEvent="trigger" 找到DOM对象， simpleEvent="trigger" 必须保留</p>
        <p>需重复的内容写在 &lt;s:each&gt; 内，{0} 会输出 1 - content.length 的数字</p>
    </div>
</div>